<template>
    <div>

        <!-- 表格总数据提示 -->
        <el-alert
          type="info"
          :closable="false"
          show-icon>
          <template #default>
            数据一共{{total}}条
          </template>
        </el-alert>

        <!-- 表格主体区域 -->
        <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%;text-align: center;">
          <el-table-column
            prop="number"
            label="试题编号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="subjectID"
            label="学科"
            width="147">
            <template #default="{row}">
              {{row.subjectID | number2Text(subjectIDList)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="catalogID"
            width="145"
            label="目录">
            <template #default="{row}">
              {{row.catalogID | number2Text(DirectoryList)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="questionType"
            width="145"
            label="题型">
            <template #default="{row}">
              {{row.questionType | number2Text(questionType)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="question"
            width="280"
            label="题干">
            <template #default={row}>
                <div v-html="row.question"></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="addDate"
            width="180"
            label="录入时间">
            <template #default="{row}">
              {{row.addDate | parseTimeByString()}}
            </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            width="145"
            label="难度">
            <template #default="{row}">
              {{row.difficulty | number2Text(difficulty)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="creator"
            width="145"
            label="录入人">
          </el-table-column>
          <el-table-column
            width="180"
            label="操作">
              <template #default={row}>
                <el-button type="primary" plain size="small" icon="el-icon-view" circle title="预览" @click="clickView(row.id)">
                </el-button>
                <el-button type="success" plain size="small"  icon="el-icon-edit" circle title="修改" @click="go2AddSub(row)"></el-button>
                <el-button type="warning" plain size="small"  icon="el-icon-delete" circle title="删除" @click="delClickSub(row.id)"></el-button>
                <el-button type="danger" plain size="small"  icon="el-icon-check" circle  title="加入精选" @click="joinClickSub(row.id)"></el-button>
              </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          background
          :page-sizes="[5, 10, 20, 50]"
          :page-size="size"
          layout="prev,pager, next, sizes, jumper "
          style="text-align:right"
          :total="total">
        </el-pagination>

        <screenSubDialog :DirectoryList="DirectoryList" :subjectIDList="subjectIDList" :subDialogVisible.sync="subDialogVisible" :subID="click2ID"></screenSubDialog>
    </div>
</template>

<script>

// 导入筛选表格部分常量
import { questionType, difficulty } from '@/api/hmmm/constants'

// ajax
import { simple as getDirectoryList } from '@/api/hmmm/directorys'
import { list, remove, choiceAdd } from '@/api/hmmm/questions'

// dialog组件
import screenSubDialog from '../components/screen-subDialog.vue'

export default {
  name: 'HmmmXxxxScreenSubtable',
  components: {
    screenSubDialog
  },
  props: {
    subjectIDList: {
      type: Array,
      required: true
    },
    screenForm: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      DirectoryList: [], // 目录简单列表
      questionType, // 试题类型渲染常量列表
      difficulty,
      // 表格双向绑定数据
      tableData: [],
      // 当前页数
      page: 1,
      size: 5,
      total: 0,
      subDialogVisible: false, // 预览弹出层
      click2ID: ''
    }
  },
  created () {
    this.getBasisList()
    this.getDirectory()
  },

  methods: {
    // 表格处理

    // 点击预览
    clickView (id) {
      this.click2ID = id
      this.subDialogVisible = true
    },

    // 请求基础题库列表
    async getBasisList () {
      const { data: res } = await list({ ...this.screenForm, page: this.page, pagesize: this.size })
      this.total = res.counts
      this.tableData = res.items
    },
    // 点击编辑携带数据跳转到添加页面并渲染
    go2AddSub (row) {
      this.$router.push({
        path: '/questions/new',
        query: { id: row.id }
      })
    },

    // 点击删除触发
    delClickSub (id) {
    //   console.log(id)
      this.$confirm('是否永久删除该题库?', '提示', { type: 'warning' })
        .then(async () => {
          await remove({ id })
          if (this.tableData.length === 1 || this.page > 1) {
            this.page--
          }
          this.$message.success('删除题库成功！')
          this.getBasisList()
        })
        .catch(e => e)
    },
    // 点击加入精选触发
    joinClickSub (id) {
      this.$confirm('是否将此题目加入精选题库?', '提示', { type: 'warning' })
        .then(async () => {
          await choiceAdd({ id, choiceState: 1 })
          this.$message.success('加入精选题库成功！')
          this.$router.push('/questions/choice')
        })
        .catch(e => e)
    },

    // 页面一加载获取目录简单列表
    async getDirectory () {
      const { data: res } = await getDirectoryList()
      // console.log(res)
      this.DirectoryList = res
    },

    // 页码处理

    // 显示条数变化触发:手动跳转到第一页
    handleSizeChange (size) {
      this.size = size
      this.page = 1
      this.getBasisList()
    },
    // 页码值改变触发
    handleCurrentChange (page) {
      this.page = page
      this.getBasisList()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-alert__icon.is-big{
    font-size: 16px;
}
</style>
